<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul,
        li {
            list-style: none;
        }
        .tab {
            width: 600px;
            margin: 100px auto;
        }
        .tab_list {
            display: flex;
            height: 40px;
            border: 1px solid #000;
            background-color: #f1f1f1;
        }
        .tab_list li {
            flex: 1;
            height: 40px;
            line-height: 40px;
            text-align: center;
            padding: 0 20px;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: red;
            color: #fff;
        }
        .tab_con .item {
				display: none;
			}
    </style>
</head>
<body>
    <div class="tab">
        <ul class="tab_list">
            <li class="current">tab1</li>
            <li>tab2</li>
            <li>tab3</li>
            <li>tab4</li>
            <li>tab5</li>
        </ul>
        <div class="tab_con">
            <div class="item" style="display: block;">tab1</div>
            <div class="item">tab2</div>
            <div class="item">tab3</div>
            <div class="item">tab4</div>
            <div class="item">tab5</div>
        </div>
    </div>
    <script src="./jquery.min.js"></script>
    <script>
        $(function () {
            // 定义定时器函数
            let index = 0
            let flag = true
            function timer() {
                if (flag) {
                    index++
                    if (index == $('.tab_list li').length) {
                        index = 0
                    }
                    $('.tab_list li').eq(index).addClass('current').siblings().removeClass('current')
                    $('.tab_con .item').eq(index).show().siblings().hide()

                }
            }
            setInterval(timer,2000)

            $('.tab_list li').mouseenter(function () {
                flag = false
                clearInterval(timer)
                let i = $(this).index()
                $(this).addClass('current').siblings().removeClass('current')
                $('.tab_con .item').eq(i).show().siblings().hide()
            })

            $('.tab').on({
                mouseenter: function() {
                    flag = false
                    clearInterval(timer)
                },
                mouseleave:function () { 
                    flag = true
                }
            })
        })
    </script>
</body>
</html>